<nz-spin [nzSpinning]="isSpinning">
    <div nz-row *ngIf="envList.length > 0" class="mb10">
        <div nz-col nzSpan="24">
            <nz-radio-group [(ngModel)]="param.envId" nzButtonStyle="solid" (ngModelChange)="changeEnv($event)">
                <ng-container *ngFor="let item of envList">
                    <label nz-radio-button [nzValue]="item.envId">{{ item.envName }}</label>
                </ng-container>
            </nz-radio-group>
        </div>
    </div>

    <div nz-row>
        <div nz-col nzSpan="22">
            <h1>配置列表</h1>
        </div>
        <div nz-col nzSpan="2" *ngIf="envList.length > 0">
            <button nz-button nzType="primary" [routerLink]="'/conf/new/'+param.envId">新建配置</button>
        </div>
    </div>
    <div nz-row *ngIf="envList.length == 0">
        <h1>
            当前还没有环境，需要先创建环境，点击<a routerLink="/env/new">创建</a>
        </h1>
    </div>
    <div nz-row *ngIf="envList.length > 0">
        <div nz-col nzSpan="24">
            <nz-table #basicTable [nzData]="result.list" nzShowPagination="true" nzFrontPagination="false"
                      nzSize="small"
                      [nzPageIndex]="param.page+1" [nzPageSize]="param.size" [nzTotal]="result.total"
                      (nzPageIndexChange)="changePage($event)" nzHideOnSinglePage="true">
                <thead>
                <tr>
                    <th>配置名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td>{{ data.configName }}</td>
                    <td>
                        <a class="color-red" nz-popconfirm nzPopconfirmTitle="您确认要删除这个配置吗，删除后数据将无法恢复?"
                           (nzOnConfirm)="delete(data.configId)">删除</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a [routerLink]="'/conf/edit/'+param.envId+'/'+data.configId">配置</a>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</nz-spin>
